<script  lang="ts" setup name="Person">
  import {ref ,computed} from "vue";
  let firstName = ref('zhang');
  let lastName = ref('san');
  //  这么定义的fullName是一个计算属性，且只可读不可修改
  // let fullName = computed(()=>{
  //   return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1) + '--' + lastName.value
  // })

  //  这么定义的fullName是一个计算属性，可读可写
  let fullName = computed({
    get(){
      return `${firstName.value.slice(0,1).toUpperCase()}${firstName.value.slice(1)}--${lastName.value}`
    },
    set(val){
      let [str1,str2] = val.split('-')
      firstName.value = str1
      lastName.value = str2
    }
  })
  function changeFullName(){
    fullName.value = 'li-si'
    console.log( fullName)
  }
</script>

<template>
  <div class="prisonBox">
    <div>姓：<input type="text" v-model="firstName"></div>
    <div>名：<input type="text" v-model="lastName"></div>
    <button @click="changeFullName">修改全名为：li - si</button>
    <div>全名：{{fullName}}</div>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>